<script setup lang="ts">
  import DetailDrawer from '@/components/detail-drawer/index.vue';
  import useDetailDrawerBinder from '@/hooks/arco/useDetailDrawerBinder';
  import { useForm } from '@/hooks/arco/useForm';
  import { queryServiceProjectList } from '@/api-new2/service/service-items';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import { computed, shallowRef, unref } from 'vue';

  const emits = defineEmits(['success']);

  const props = defineProps<{
    monthList: any[];
  }>();

  const monthArray = computed(() => {
    return [
      {
        name: '全部月份',
        value: 'all',
      },
      ...props.monthList,
    ];
  });

  const selectProject = shallowRef<any>(null);

  const projectSelect = useSelectOption({
    apiFun: queryServiceProjectList,
    transformDataFun(data) {
      return data.list.map((e: any) => ({
        value: e.id,
        label: e.name,
        extra: e,
      }));
    },
    enhanceExtraData: true,
    onChange(e, extra) {
      selectProject.value = extra;
    },
  });

  const form = useForm({
    state: {
      projectId: '',
      count: '',
      month: [] as string[],
    },
  });

  const onCheckboxClick = (item: any) => {
    if (item.value === 'all') {
      setTimeout(() => {
        const checked = form.state.month.includes(item.value);
        if (checked) {
          form.state.month = props.monthList.map((e) => e.value);
        } else {
          form.state.month = [];
        }
      }, 0);
    } else {
      const checked = form.state.month.includes('all');
      if (checked) {
        form.state.month = form.state.month.filter((v) => v !== 'all');
      }
    }
  };

  const modal = useDetailDrawerBinder({
    completeMsg: false,
    renderTitle() {
      return '添加项目';
    },
    async onOkClick() {
      await form.validate();
      emits('success', unref(form.state), selectProject.value);
      return true;
    },
    onShow() {
      form.backToInit();
    },
  });

  defineExpose(modal.expose);
</script>

<template>
  <DetailDrawer v-bind="modal.bindProps">
    <a-form v-bind="form.bindProps" layout="vertical">
      <a-form-item label="服务项目" field="projectId">
        <a-select
          v-model="form.state.projectId"
          v-bind="projectSelect.bindProps"
        >
        </a-select>
      </a-form-item>
      <a-form-item label="频率数量" field="count">
        <a-input v-model="form.state.count" placeholder="请输入频率数量">
          <template #append> 次/月 </template>
        </a-input>
      </a-form-item>
      <a-form-item label="应用范围" field="month">
        <a-checkbox-group
          v-model="form.state.month"
          class="flex flex-wrap gap-[10px] justify-start"
        >
          <a-checkbox
            v-for="item in monthArray"
            :key="item.value"
            :value="item.value"
            style="margin: 0"
          >
            <template #checkbox="{ checked }">
              <div
                class="custom-checkbox-card"
                :class="{ 'custom-checkbox-card-checked': checked }"
                @click.stop="onCheckboxClick(item)"
              >
                <div class="custom-checkbox-card-title">
                  {{ item.name }}
                </div>
              </div>
            </template>
          </a-checkbox>
        </a-checkbox-group>
      </a-form-item>
    </a-form>
  </DetailDrawer>
</template>

<style lang="less" scoped>
  .custom-checkbox-card {
    padding: 4px 8px;
    border: 1px solid var(--color-border-2);
    border-radius: 4px;
    box-sizing: border-box;
  }

  .custom-checkbox-card-title {
    color: var(--color-text-1);
    font-size: 12px;
  }

  .custom-checkbox-card:hover,
  .custom-checkbox-card-checked,
  .custom-checkbox-card:hover .custom-checkbox-card-mask,
  .custom-checkbox-card-checked .custom-checkbox-card-mask {
    border-color: rgb(var(--primary-6));
  }

  .custom-checkbox-card-checked {
    background-color: var(--color-primary-light-1);
  }

  .custom-checkbox-card:hover .custom-checkbox-card-title,
  .custom-checkbox-card-checked .custom-checkbox-card-title {
    color: rgb(var(--primary-6));
  }

  .custom-checkbox-card-checked .custom-checkbox-card-mask-dot {
    background-color: rgb(var(--primary-6));
  }
</style>
